<template>
	<cl-crud :ref="setRefs('crud')" :on-refresh="onRefresh" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-export-btn type="success" :columns="table.columns" />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key placeholder="输入课程主题、介绍、课程小节，支持模糊查询" />
		</el-row>
		<el-row>
			<cl-filter label="课程类型">
				<el-select
					size="mini"
					v-model="form.course_type"
					@change="searchSubmit"
					style="width: 20px"
				>
					<el-option :key="all" :value="null" label="全部"></el-option>
					<el-option
						v-for="item in course_type"
						:key="item.value"
						:value="item.value"
						:label="item.label"
					></el-option>
				</el-select>
			</cl-filter>
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table" @row-click="onRowClick">
				<template #column-courseNames="{ scope }">
					<el-row>
						<el-col :span="24">
							<!-- <el-card
								v-for="(item, index) in scope.row.courseNames_list"
								:key="index"
								disable-transitions
								effect="dark"
								:body-style="{ padding: '5px', textAlign: 'left', margin: '0px 70px' }"
								style="margin: 2px"
								shadow="always"
							>
								{{ item }}
							</el-card> -->
							<!-- <sorta :data = "scope.row.courseNames_list"></sorta> -->
							<sort :data = "scope.row.courseNames_list" @refresh="sortRefresh"></sort>
							<!-- {{scope.row}} -->
							<!-- {{scope.row.courseNames_list}} -->
							<!-- <p style="margin-left: 150px;" v-for="(item, index) in scope.row.courseNames_list">{{item}}</p> -->
						</el-col>
					</el-row>
					<!-- <el-tag
						v-for="(item, index) in scope.row.courseNames_list"
						:key="index"
						disable-transitions
						size="small"
						effect="dark"
						style="margin: 2px"
						>{{ item }}</el-tag
					> -->
				</template>
				<template #default="props">
        <div m="4">
          <p m="t-0 b-2">State: {{ props.row.state }}</p>
          <p m="t-0 b-2">City: {{ props.row.city }}</p>
          <p m="t-0 b-2">Address: {{ props.row.address }}</p>
          <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
        </div>
      </template>
			</cl-table>
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, reactive, ref, onMounted } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";
import { baseUrl, URL } from "/@/config/env";
import axios from "axios";
import { random } from "lodash";
import dataSort from "../components/sort.vue"

export default defineComponent({
	components:{
		sort:dataSort,
	},
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		// 刷新监听
		async function onRefresh(params: any, { next, render }: any) {
			const { list } = await next(params);

			render(
				list.map((e: any) => {
					if (e.courseNames) {
						e.courseNames_list = e.courseNames.split(",");
					}

					// e.status = Boolean(e.status);

					return e;
				})
			);
			console.log(list,"1111111");
			
		}

		// 自定义筛选
		const form = ref({
			course_type: null
		});

		// 筛选按钮提交
		const searchSubmit = function (e) {
			refs.value.crud.refresh({ ...form.value });
		};

		// 重置筛选条件

		const resetSerach = function () {
			form.value = {
				course_type: null
			};
			refs.value.crud.refresh({ ...form.value });
		};
		const tag_type = ["warning","info","success","danger"]
		// 定义课程类型列表
		const course_type = ref([]);
		// 获取课程类型
		const getCourseType = async function () {
			const res = await service.courseTypeService.list();
			res.forEach((item, index) => {
				course_type.value.push({
					value: item.id,
					label: item.course_id,
					type: tag_type[Math.floor((Math.random()*4)+1)],
				});
			});
		};

		onMounted(() => {
			// 获取课程类型
			getCourseType();
		});

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					prop: "phase_name",
					label: "课程主题",
					span: 12,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入阶段名称"
						}
					},
					rules: {
						required: true,
						message: "阶段名称不能为空"
					}
				},
				{
					prop: "course_type",
					label: "课程类型",
					span: 12,
					component: {
						name: "el-select",
						options: course_type.value,
						props: {
							placeholder: "请选择课程类型"
						}
					},
					rules: {
						required: true,
						message: "课程类型不能为空"
					}
				},
				{
					prop: "phase_course_introduce",
					label: "阶段介绍",
					span: 24,
					component: {
						name: "el-input",
						props: {
							type: "textarea",
							rows: 5,
							placeholder: "请输入阶段介绍"
						}
					},
					rules: {
						required: true,
						message: "阶段介绍不能为空"
					}
				},
				{
					prop: "note",
					label: "备注",
					span: 24,
					component: {
						name: "el-input",
						props: {
							type: "textarea",
							placeholder: "请输入备注",
							rows: 5
						}
					},
					rules: {
						required: false,
						message: "备注不能为空"
					}
				},
				{
					prop: "sort",
					label: "排序",
					span: 12,
					component: {
						name: "el-input-number",
						props: {
							placeholder: "请输入排序"
						}
					},
					rules: {
						required: true,
						message: "排序不能为空"
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			props: {
        "row-key": "id"
      },
			columns: [
				// {
				// 	type: "selection",
				// 	width: 60
				// },
				// {
				// 	type: "index",
				// 	label: "#",
				// 	width: 60
				// },
				{
					prop: "phase_name",
					label: "课程主题",
					width: 120
				},
				{
					prop: "courseNames",
					label: "课程小节",
					type:"expand",
					width: 80
				},
				
				{
					prop: "phase_course_introduce",
					label: "课程主题介绍",
					// width: 120
				},
				
				{
					prop: "course_type",
					label: "课程类型",
					dict: course_type.value,
					width: 110
				},
				{
					prop: "sort",
					label: "排序",
					width: 70,
					sortable: true
				},

				{
					label: "操作",
					type: "op",
					width: 100,
				}
			]
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			ctx.service(service.courseSystemService).done();
			app.refresh();
		}

		// 行点击展开
    function onRowClick(row: any, column: any) {
			console.log(row,"row");
			console.log(column,"column");
			
      if (row.children) {
        refs.value.table.toggleRowExpansion(row);
      }
    }
		
		const sortRefresh = function(){
			// refs.value.crud.refresh()
		}

		

		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad,
			onRefresh,
			// 筛选
			form,
			resetSerach,
			searchSubmit,
			course_type,
			onRowClick,
			sortRefresh
		};
	}
});
</script>
